<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450" style="border:1px solid #ccc;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.font = '21px "Comic Sans MS", cursive, sans-serif';
    ctx.textBaseline = 'middle';

    // Helper function to draw an arrowhead
    function drawArrowhead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2);
        ctx.stroke();
        ctx.restore();
    }

    // --- Main drawing components ---

    // 1. Coordinate System (Axes and Track)
    const originX = 80, originY = 150;
    const trackLength = 360;
    const trackEndX = originX + trackLength;

    // Track AB (which is also the x-axis)
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(trackEndX, originY);
    ctx.stroke();

    // x-axis arrow (partway along the track)
    const arrowXPos = originX + 80;
    drawArrowhead(ctx, arrowXPos, originY, 0, 10);

    // y-axis
    const yAxisHeight = 120;
    const yAxisTop = originY - yAxisHeight;
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX, yAxisTop);
    ctx.stroke();

    // y-axis arrow
    drawArrowhead(ctx, originX, yAxisTop, -Math.PI / 2, 10);

    // Labels for axes and points
    ctx.textAlign = 'center';
    ctx.fillText('A', originX - 20, originY + 5);
    ctx.fillText('B', trackEndX + 20, originY + 5);
    ctx.fillText('x', arrowXPos + 25, originY + 20);
    ctx.fillText('y', originX + 25, yAxisTop + 10);

    // 2. Block M
    const blockWidth = 80;
    const blockHeight = 50;
    const blockCenterX = originX + 200;
    const blockTopLeftX = blockCenterX - blockWidth / 2;
    const blockTopLeftY = originY - blockHeight;

    ctx.beginPath();
    ctx.rect(blockTopLeftX, blockTopLeftY, blockWidth, blockHeight);
    ctx.stroke();
    ctx.fillText('M', blockCenterX, blockTopLeftY + blockHeight / 2);

    // 3. Pendulum
    const attachX = blockCenterX;
    const attachY = originY;
    const pendulumLength = 160;
    const theta = 21 * Math.PI / 180; // Angle in radians

    // Pendulum bob position
    const bobX = attachX + pendulumLength * Math.sin(theta);
    const bobY = attachY + pendulumLength * Math.cos(theta);

    // String
    ctx.beginPath();
    ctx.moveTo(attachX, attachY);
    ctx.lineTo(bobX, bobY);
    ctx.stroke();

    // Bob m
    const bobRadius = 9;
    ctx.beginPath();
    ctx.arc(bobX, bobY, bobRadius, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // Labels for pendulum
    ctx.fillStyle = 'black';
    ctx.textAlign = 'left';
    ctx.fillText('m', bobX + bobRadius + 2, bobY + bobRadius + 5);
    const bLabelX = attachX + pendulumLength * 0.55 * Math.sin(theta) + 5;
    const bLabelY = attachY + pendulumLength * 0.55 * Math.cos(theta);
    ctx.fillText('b', bLabelX, bLabelY);

    // 4. Angle Representation
    ctx.save();
    ctx.lineWidth = 1.5;
    
    // Dashed lines
    ctx.setLineDash([6, 4]);
    // Vertical dashed line
    ctx.beginPath();
    ctx.moveTo(attachX, attachY);
    ctx.lineTo(attachX, bobY);
    ctx.stroke();
    // Horizontal dashed line
    ctx.beginPath();
    ctx.moveTo(attachX, bobY);
    ctx.lineTo(bobX, bobY);
    ctx.stroke();
    
    // Right angle marker
    ctx.setLineDash([]); // solid line for marker
    const markerSize = 8;
    ctx.beginPath();
    ctx.moveTo(attachX + markerSize, bobY);
    ctx.lineTo(attachX + markerSize, bobY - markerSize);
    ctx.lineTo(attachX, bobY - markerSize);
    ctx.stroke();

    ctx.restore();

    // Angle arc
    const arcRadius = 40;
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    ctx.arc(attachX, attachY, arcRadius, Math.PI / 2, Math.PI / 2 + theta);
    ctx.stroke();

    // Theta label
    ctx.textAlign = 'center';
    const thetaLabelRadius = arcRadius * 0.7;
    const thetaLabelX = attachX + thetaLabelRadius * Math.sin(theta / 2);
    const thetaLabelY = attachY + thetaLabelRadius * Math.cos(theta / 2);
    ctx.fillText('θ', thetaLabelX + 5, thetaLabelY);

    // 5. Figure Caption
    ctx.textAlign = 'center';
    ctx.font = '20px "Times New Roman", serif';
    ctx.fillText('Fig. 2.24.', canvas.width / 2, canvas.height - 30);

</script>
</body>
</html>